<template>
  <view class="xinguan-view">
    <view v-for="(item,index) in list" :key="index">
      <text class="name">{{item.hpv_name}}</text>
      <view class="xinguan-order">
        <text>接种人:</text>
        <text>{{item.name}}</text>
      </view>
      <view class="xinguan-order">
        <text>接种地点:</text>
        <text>{{item.address}}</text>
      </view>
      <view class="xinguan-order">
        <text>疫苗套餐:</text>
        <text>{{item.combo}}</text>
      </view>
      <view class="xinguan-order">
        <text>订单编号:</text>
        <text>{{item.order_number}}</text>
      </view>
      <view class="reg-price">
        <text>¥{{item.price}}</text>
      </view>
      <!-- 取消预约 -->
      <view class="reg-cancel">
        <text @click="go(item._id)" v-if="item.cancel">是否取消预约</text>
        <text class="prevent_style" v-if="!item.cancel">已取消预约</text>
      </view>
    </view>
    <!-- 提示组件 -->
    <nullList name="没有预约的数据" v-if="list.length===0"></nullList>
    <view style="height:100px"></view>
  </view>
</template>

<script>
import {hpvuserorder,hpvcancel} from "../../utils/API/vaccineorder";
import nullList from "../../components/nullList/nullList.vue"
export default {
  components: {
    nullList
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    async xuan() {
      let {data} = await hpvuserorder()
      console.log(data)
      this.list=data
    },
    go(id){
      hpvcancel(id)
      this.xuan()
    }
  },
  mounted() {
    this.xuan()
  }
}
</script>

<style lang="scss">
@import url('../../static/common-style/vaccine.css');
</style>
